layui.use(['table', 'layer'], function () {
    var layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        table = layui.table;

    // 动态加载角色列表
    var tableIns = table.render({
        elem: '#roleList'
        , height: 420
        , url: ctx + '/role/list' //数据接口
        , cellMinWidth: 95
        , title: '角色表'
        , page: true //开启分页
        , limits: [10, 15, 20, 25]
        , limit: 10
        , toolbar: '#toolbarDemo' //开启工具栏，可以自定义模板，详见文档
        , id: "roleListTable"
        , cols: [[
            {type: "checkbox", fixed: "left", width: 50},
            {field: "id", title: '编号', fixed: "true", width: 80},
            {field: 'roleName', title: '⻆⾊名', minWidth: 50, align: "center"},
            {field: 'roleRemark', title: '⻆⾊备注', minWidth: 100, align: 'center'},
            {field: 'createDate', title: '创建时间', align: 'center', minWidth: 150},
            {field: 'updateDate', title: '更新时间', align: 'center', minWidth: 150},
            {title: '操作', minWidth: 150, templet: '#roleListBar', fixed: "right", align: "center"}
        ]]
    });

    // 多条件搜索
    $(".search_btn").click(function () {
        table.reload("roleListTable", {
            page: {
                curr: 1 //从第一页开始
            },
            where: {
                roleName: $("input[name = 'roleName']").val()
            }
        })
    });

    // 头部工具栏事件
    table.on('toolbar(roles)', function (obj) {
        let checkStatus = table.checkStatus(obj.config.id);

        switch (obj.event) {
            case 'add':
                openAddOrUpdateRoleDialog();
                break;
            case 'grant':
                openGrantDialog(checkStatus.data);
                break;
        }
    })

    // 行监听
    table.on('tool(roles)', function (obj) {
        switch (obj.event) {
            case 'edit':
                openAddOrUpdateRoleDialog(obj.data.id);
                break;
            case 'del':
                delRoleDialog(obj.data.id);
                break;
        }
    });

    /**
     * 打开添加or修改弹出层
     * @param uid
     */
    function openAddOrUpdateRoleDialog(uid) {
        let url = ctx + "/role/addOrUpdateRolePage";
        let title = "添加角色";
        if (uid) {
            url = url + "?id=" + uid;
            title = "修改角色";
        }
        layer.open({
            type: 2, // page 层类型
            area: ['500px', '300px'],
            title: title,
            shade: 0.6, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            maxmin: true, // 允许全屏最小化
            anim: 0, // 0-6 的动画形式，-1 不开启
            content: url
        });
    }

    // 角色授权
    function openGrantDialog(data) {
        if (data.length === 0) {
            layer.msg("请选择要授权的角色", {icon: 6});
            return;
        }
        if (data.length > 1) {
            layer.msg("暂不支持批量授权", {icon: 6});
            return;
        }

        let url = ctx + "/role/grant?roleId=" + data[0].id;
        let title = "⻆⾊管理-⻆⾊授权";
        layer.open({
            type: 2, // page 层类型
            area: ['500px', '300px'],
            title: title,
            shade: 0.6, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            maxmin: true, // 允许全屏最小化
            anim: 0, // 0-6 的动画形式，-1 不开启
            content: url
        });
    }

    // 删除角色
    function delRoleDialog(data) {
        layer.confirm("确定删除该角色吗", {icon: 9, title: "⻆⾊管理"}, function () {
            $.post(ctx + "/role/delRole", {roleId: data}, function (data) {
                if (data.code === 200) {
                    layer.msg("操作成功", {icon: 6}, function () {
                        parent.location.reload();
                    });
                } else {
                    layer.msg(data.msg, {icon: 5});
                }
            });
        });
    }

});